<template>
	<view style="background-color: white;">
		<view class="article-header" >
			<view class="article-title-wrapper">
				<text class="article-title">{{ info.title }}</text>
			</view>
			<view class="article-meta">
				<text class="article-author">{{ info.xtitle }}</text>
				<text class="article-date">{{ info.create_at }}</text>
			</view>
		</view>
		
		<view style="padding: 0 20px;">
		<rich-text :nodes="info.content"></rich-text>
		</view>

	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: [],
				article: {
				
				},
				formattedNodes: []
			};
		},
		onLoad(option) {
			this.id = option.id
		},
		onShow() {
			this.fetchData()
		},
		methods: {
			fetchData() {
				var that = this
				uni.request({
					url: 'https://shanghaihuxi.cn/api/index/getArticleDetail?id='+that.id,
					method: 'GET',
					header: {
						'Content-Type': 'application/json' // 请求头，可以根据接口要求修改
					},
					success: (res) => {
						that.info = res.data.data
						that.formattedNodes = res.data.data.content
						console.log(2222, that.info)
					}
				});
			},
			parseArticleContent() {
				let tempDiv = document.createElement('div');
				tempDiv.innerHTML = this.article.content;
				let nodes = [];

				function traverse(node) {
					if (node.nodeType === 3) { // 文本节点
						nodes.push({
							type: 'text',
							text: node.textContent
						});
					} else if (node.nodeType === 1) { // 元素节点
						let item = {
							name: node.tagName.toLowerCase(),
							attrs: {},
							children: []
						};
						for (let i = 0; i < node.attributes.length; i++) {
							let attr = node.attributes[i];
							item.attrs[attr.name] = attr.value;
						}
						for (let child of node.childNodes) {
							traverse(child);
						}
						nodes.push(item);
					}
				}
				for (let child of tempDiv.childNodes) {
					traverse(child);
				}
				this.formattedNodes = nodes;
			}
		},
		mounted() {
			this.parseArticleContent();
		}
	};
</script>

<style scoped>
	.article-detail-page {
		padding: 20px;
		background-color: #f8f8f8;
		font-family: Arial, sans-serif;
	}

	.article-header {
		text-align: center;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10px;
		margin-bottom: 20px;
	}

	.article-title-wrapper {
		border-bottom: 2px solid #ddd;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}

	.article-title {
		font-size: 26px;
		color: #333;
		font-weight: bold;
	}

	.article-meta {
		display: flex;
		justify-content: center;
		color: #777;
		font-size: 14px;
	}

	.article-author {
		margin-right: 15px;
	}

	.article-date {
		margin-left: 15px;
	}

	rich-text {
		background-color: #fff;
	

		line-height: 1.6;
		font-size: 16px;
		word-wrap: break-word;
		white-space: normal;
		
		
	}

	rich-text h2 {
		font-size: 22px;
		color: #444;
		margin-bottom: 10px;
	}

	rich-text p {
		margin-bottom: 15px;
		color: #333;
	}

	rich-text strong {
		font-weight: bold;
	}

	rich-text em {
		font-style: italic;
	}

	rich-text a {
		color: #007aff;
		text-decoration: none;
	}

	rich-text a:hover {
		text-decoration: underline;
	}

	rich-text img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	rich-text ul {
		margin-left: 20px;
		margin-bottom: 15px;
	}

	rich-text li {
		margin-bottom: 5px;
		list-style-type: disc;
	}
</style>